<template>
    <view>
        <view class="BalanceBox">
            <!--   <text class="row j-centert white size32">{{ member_find.v_name }}账户{{ TypeName }}明细</text> -->
            <text class="row j-centert white size42 m-top20">{{ date[current].year }}</text>
            <view class="boxDate">
                <view class="iconfont icon-xiangzuo dateIcon" :class="{ opacity05: Left }" @click="changMonth(1)">
                </view>
                <swiper
                    :indicator-dots="false"
                    :current="current"
                    :autoplay="false"
                    class="swiper"
                    display-multiple-items="3"
                    :disable-touch="true"
                    @change="SwiperChange">
                    <swiper-item class="swiper-item"></swiper-item>
                    <swiper-item
                        class="swiper-item"
                        v-for="(item, index) in date"
                        :key="index"
                        :class="{ Active: current == index }"
                        @click="current = index">
                        {{ item.name }}
                    </swiper-item>
                    <swiper-item class="swiper-item"></swiper-item>
                </swiper>
                <view
                    class="iconfont icon-xiangyouxiayiye dateIcon"
                    :class="{ opacity05: Rigth }"
                    @click="changMonth(2)">
                </view>
            </view>
            <text class="row j-centert white size28 m-top20">账户{{ TypeName }}（{{ unit }}）</text>
            <view class="changeMoney">
                <text class="allMoney" :class="{ 'p-left46': authority }">{{ Account }}</text>
                <view class="AddMoney" @click="TopUp = true" v-if="authority">
                    <view class="iconfont icon-wode-qianbao-chongzhi white size50"></view>
                    <text class="white h7 m-top4">充{{ TypeName }}</text>
                </view>
            </view>

            <view class="moneyState">
                <view class="Stateli">本月收入：￥{{ Income }}</view>
                <view class="Stateli">本月支出：￥{{ Disburse }}</view>
            </view>
        </view>

        <view class="row padding20">
            <view class="list" v-for="item in pageData" :key="item.con_id">
                <view class="list_content">
                    <text class="list_title">{{ item.remarks }}</text>
                    <text class="list_time">{{ item.con_addtime }}</text>
                </view>
                <view class="list_money" :class="{ addMoney: item.con_moneystatus == '1' }" v-if="Type == 'money'"
                    >{{ item.con_moneystatus | Unit }} ￥{{ item.con_money }}</view
                >
                <view class="list_money" :class="{ addMoney: item.con_jifenstatus == '1' }" v-if="Type == 'jifen'"
                    >{{ item.con_jifenstatus | Unit }} ￥{{ item.con_jifen }}</view
                >
            </view>
        </view>

        <u-empty mode="list" text="暂无记录" :marginTop="80" v-if="!pageData.length"></u-empty>

        <addBalance v-if="TopUp" :vid="vid" :Type="Type" @Cancel="TopUp = false" @Continue="Continue"></addBalance>
    </view>
</template>

<script>
    import addBalance from '@/Money/components/addBalance'
    export default {
        components: {
            addBalance,
        },
        data() {
            return {
                date: [],
                current: 6,
                TopUp: false,
                Type: 'money', //1 余额 2 积分
                limit: 10,
                page: 1,
                vid: '',
                member_find: '',
                info: '',
                pageData: [],
                getMore: true,
                operatingPower: '',
            }
        },
        onLoad(opt) {
            if (opt.vid) this.vid = opt.vid
            if (opt.Type) this.Type = opt.Type
            const Year = new Date().getFullYear()
            const Month = new Date().getMonth() + 1
            for (let i = 0; i < Month; i++) {
                let stringMonth = String(i + 1)
                this.date.push({
                    year: Year,
                    month: stringMonth.padStart(2, '0'),
                    name: `${stringMonth}月`,
                })
            }
            this.current = this.date.length - 1
            this.user_query_list()
        },
        methods: {
            user_query_list() {
                this.$showLoading('')
                this.$http
                    .get({
                        url: '/singleSaleManageApi/user_query_list',
                        data: {
                            page: this.page,
                            limit: this.limit,
                            thisY: this.date[this.current].year,
                            thisM: this.date[this.current].month,
                            type: this.Type,
                            down_v_id: this.vid,
                            v_id: this.vid,
                            shop_id: uni.getStorageSync('store_id'),
                        },
                    })
                    .then((res) => {
                        this.$hideLoading()
                        if (res.errcode != '100') return this.$Toast(res.msg)
                        const result = res.data
                        this.member_find = res.member_find
                        if (res.operatingPower) this.operatingPower = res.operatingPower
                        const response = result.list || []
                        this.page == 1 ? (this.pageData = response) : (this.pageData = [...this.pageData, ...response])
                        this.info = result
                        if (response.length < this.limit) this.getMore = false
                    })
            },
            changMonth(Val) {
                if (this.current == 0 && Val == 1) return
                if (this.current == this.date.length - 1 && Val == 2) return
                Val == 1 ? this.current-- : this.current++
                this.Continue()
            },
            SwiperChange(e) {
                this.current = e.detail.current
                this.Continue()
            },
            Continue() {
                this.page = 1
                this.getMore = true
                this.user_query_list()
            },
        },
        onReachBottom() {
            if (!this.getMore) return
            this.page++
            this.user_query_list()
        },
        computed: {
            Left() {
                return this.current == 0 ? true : false
            },
            Rigth() {
                return this.current == this.date.length - 1 ? true : false
            },
            TypeName() {
                const typeMap = {
                    money: { title: '余额明细', name: '余额' },
                    jifen: { title: '积分明细', name: '积分' },
                }
                const typeInfo = typeMap[this.Type]
                if (typeInfo) {
                    this.$common.BarTitle(typeInfo.title)
                    return typeInfo.name
                }
            },
            unit() {
                return this.Type == 1 ? '元' : '分'
            },
            Account() {
                let Money
                if (this.Type == 'money') Money = this.member_find.v_money
                if (this.Type == 'jifen') Money = this.member_find.v_jifen_yue
                return Money
            },
            Income() {
                if (this.Type == 'money') return this.info.moneyInc
                if (this.Type == 'jifen') return this.info.jifenInc
            },
            Disburse() {
                if (this.Type == 'money') return this.info.moneyDown
                if (this.Type == 'jifen') return this.info.jifenDown
            },
            authority() {
                if (!this.operatingPower) return
                if (this.Type == 'money' && this.operatingPower.operatingBalance == '1') return true
                if (this.Type == 'jifen' && this.operatingPower.operatingJiFen == '1') return true
            },
        },
        watch: {
            member_find(newVal, oldVal) {
                if (newVal) this.$common.BarTitle(`${newVal.v_name}账户${this.TypeName}明细`)
            },
        },
        filters: {
            Unit(Val) {
                switch (Val) {
                    case '0':
                        return '-'
                        break
                    case '1':
                        return '+'
                        break
                }
            },
        },
    }
</script>

<style>
    page {
        background-color: #f8f8f8;
    }
</style>
<style lang="scss" scoped>
    .BalanceBox {
        width: 100%;
        padding: 24rpx 50rpx;
        background-color: #006666;
        display: flex;
        flex-direction: column;
    }
    .boxDate {
        width: 100%;
        height: 80rpx;
        border-radius: 40rpx;
        background-color: rgba(255, 255, 255, 0.4);
        margin-top: 30rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .dateIcon {
        color: #fff;
        font-size: 30rpx;
        padding: 20rpx;
    }

    .swiper {
        flex: 1;
        height: 100%;
    }

    .swiper-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28rpx;
    }

    .Active {
        font-size: 36rpx;
    }
    .changeMoney {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .allMoney {
        flex: 1;
        color: #fff;
        display: flex;
        justify-content: center;
        font-size: 52rpx;
    }
    .AddMoney {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .moneyState {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30rpx;
    }
    .Stateli {
        display: flex;
        justify-content: center;
        color: #fff;
        font-size: 24rpx;
        position: relative;
    }
    .Stateli:nth-child(1):before {
        content: '';
        width: 1rpx;
        height: 30rpx;
        background-color: #ffffff;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(0, -50%);
    }
    .list {
        width: 100%;
        padding: 20rpx;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
    }
    .list_content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .list_title {
        color: #000;
        font-size: 28rpx;
    }
    .list_time {
        color: #333;
        font-size: 24rpx;
        margin-top: 10rpx;
    }

    .list_money {
        color: #ff0000;
        font-size: 36rpx;
    }
    .addMoney {
        color: #006600;
    }
</style>
